<template>
    <div class="search">
        <span>名称：</span>
        <a-input-search class="searchtext" v-model:value="dataModel.name" placeholder="请输入名称信息" enter-button="查询"
            size="default" @search="$onSearch" />
        <a-button class="add" type="primary" @click="onAdd">添加</a-button>
    </div>
    <div class="panel">
        <a-table :dataSource="dataSource" :columns="columns" size="small" :pagination=false>
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'operation'">
                    <a class="edit" @click="onEdit(record)">编辑</a>
                    <a-popconfirm title="确定删除吗？" @confirm="onDelete(record)" okText="确定" cancelText="取消">
                        <a>删除</a>
                    </a-popconfirm>
                </template>
            </template>
        </a-table>
        <a-pagination class="page" v-model:current="dataModel.pageIndex" v-model:total="dataModel.count" show-less-items
            @change="$change" />
    </div>
    <add ></add>
</template>

<style lang="scss" scoped>
.page {
    margin-top: 10px;
}

.search {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.searchtext {
    width: 300px;
}

.add {
    border: none;
    background: #bacf65;
}

.edit {
    margin-right: 16px;
}
</style>

<script setup>
import { ref, reactive, toRefs, provide } from 'vue';
import { $tableList, $tableDelete } from '@/api/apis/table';
import add from './add.vue';
import { message } from 'ant-design-vue';
import { storeToRefs } from 'pinia'
import { useConsoleStore } from '@/store/store';

//初始化
const consoleStore = useConsoleStore();
let { showDrawer } = storeToRefs(consoleStore)

let dataModel = reactive({
    dataSource: [],
    columns: [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '操作',
            dataIndex: 'operation',
        }
    ],
    pageIndex: 1,
    count: 0,
    name: "",
})
let { dataSource, columns, pageIndex, count, name } = toRefs(dataModel)


const onAdd = () => {
    consoleStore.showDrawer = true
    consoleStore.tableId = ''
    if ('add' == consoleStore.oper) {
        consoleStore.operChange = false;
    } else { consoleStore.operChange = true; }
    consoleStore.oper = 'add'
};

const onDelete = async (record) => {
    let { code, data, msg } = await $tableDelete(record)
    if (code == "00001") {
        message.success(msg);
        $loadData()
    } else {
        message.error(msg);
    }
    // dataSource.value = dataSource.value.filter(item => item.key !== key);
};

const onEdit = (record) => {
    consoleStore.showDrawer = true
    consoleStore.tableId = record.id
    if ('edit' == consoleStore.oper) {
        consoleStore.operChange = false;
    } else { consoleStore.operChange = true; }
    consoleStore.oper = 'edit'
};

// 用户点击查询按钮进行查询
const $onSearch = () => {
    dataModel.pageIndex = 1;
    $loadData()
}

// 用户切换分页进行查询
const $change = (pageIndex, pageSize) => {
    $loadData()
}

const $loadData = async () => {
    let { code, data, msg } = await $tableList({ "data": { "name": dataModel.name, "age": "", "address": "" }, "current": dataModel.pageIndex, "size": 10 })
    if (code == "00001") {
        if (data.count > 0) {
            dataModel.dataSource = data.dataList
            dataModel.count = parseInt(data.count)
        }
    } else {
        message.error(msg);
    }
}

// 打开界面是否加载数据
// $loadData()

// 依赖注入，其他vue可以通过inject，调用$loadData方法
provide('$loadData', $loadData)
</script>
